<template>
  <div class="info_main mt-5 ml-4">
<!--    搜素框  -->
    <div class="row" >
      <div class="col-md-2">
        <el-select v-model="fiter_category" placeholder="选择考研资讯类别..." @change="fiter_pee">
          <el-option label="考研信息" value="1"></el-option>
          <el-option label="招生信息" value="2"></el-option>
          <el-option label="考研日报" value="3"></el-option>
          <el-option label="特别推荐" value="4"></el-option>
          <el-option label="其他" value="5"></el-option>
        </el-select>
      </div>
      <div class="col-md-10">
        <el-input  type="text"
                   v-model="findTitle"
                   style="width: 500px;"
                   placeholder="请输入考研资讯标题..."
                   clearable
                   @keyup.enter.native="searchByTitle">
        </el-input>
        <el-button type="primary" icon="el-icon-search" @click="searchByTitle()" class="ml-3" plain>搜索</el-button>
        <el-button type="info" icon="el-icon-delete" @click="clearFindInput()" class="ml-3">重置</el-button>
      </div>
<!--      批量选择删除按钮  添加按钮-->
      <div class="mt-3 ml-3">
        <el-button type="primary" @click="addOpen()" plain><i class="el-icon-plus" ></i>添加</el-button>
        <el-button @click="toggleSelection()">取消选择</el-button>
        <el-button type="danger" @click="handleMultipleDelete">批量删除</el-button>
      </div>

    </div>

    <div class="show_data mt-3">
      <el-table
          ref="multipleTable"
          v-horizontal-scroll="'always'"
          show-overflow-tooltip
          :data="showData"
          style="width: 100%"
          :cell-style="{color: '#666', fontFamily: 'Arial',fontSize:'17px'}"
          :header-cell-style="{background:'whitesmoke', fontFamily:'Helvetica',fontSize:'20px'}"
          height="700"
          @selection-change="handleSelectionChange"
          tooltip-effect="dark"
          :default-sort = "{prop: 'date', order: 'descending'}">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            fixed
            prop="pee_release_time"
            label="编辑时间"
            width="250">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.pee_release_time }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="pee_title"
            label="标题"
            width="300">
        </el-table-column>
<!--        <el-table-column type="expand">-->
<!--          <template slot-scope="props">-->
<!--            <el-form label-position="left" inline class="demo-table-expand">-->
<!--              <el-form-item label="内容：">-->
<!--                <span>{{ props.row.pee_content }}</span>-->
<!--              </el-form-item>-->
<!--            </el-form>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column
            prop="pee_category"
            label="类别"
            column-key="pee_category"
            width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.pee_category==1" disable-transitions type="primary">
              <span class="typeClass">考研信息</span>
            </el-tag>
            <el-tag v-else-if="scope.row.pee_category==2" disable-transitions type="success">
              <span class="typeClass">招生信息</span>
            </el-tag>
            <el-tag v-else-if="scope.row.pee_category==3" disable-transitions type="danger">
              <span class="typeClass">考研日报</span>
            </el-tag>
            <el-tag v-else-if="scope.row.pee_category==4" disable-transitions type="warning">
              <span class="typeClass">特别推荐</span>
            </el-tag>
            <el-tag v-else-if="scope.row.pee_category==5" disable-transitions type="info">
              <span class="typeClass">其他</span>
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="pee_source"
            label="来源"
            width="120">
        </el-table-column>
        <el-table-column
            prop="pee_label"
            label="标签"
            width="120">
        </el-table-column>
        <el-table-column
            prop="admin_name"
            label="编辑者"
            width="120">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="180">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="edit(scope.$index, scope.row)">
              <span class="btnfontClass" >编辑</span>
            </el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">
              <span class="btnfontClass" >删除</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>


      <!--    分页-->
      <div class="pagin mt-5 mb-5">
        <el-pagination
            @current-change="handleCurrentChange"
            :current-page="peeContainerPage"
            :page-size="peeContainerSize"
            layout="total,prev, pager, next"
            :total=total>
        </el-pagination>
      </div>

      <!--编辑弹窗-->
      <el-dialog
          title="编辑考研资讯"
          :visible.sync="editdialogVisible"
          width="70%">

        <!--        编辑表单-->
        <el-form ref="Editform" :model="Editform" label-width="100px" :rules="rules">


          <el-row>
            <el-col :span="12">
              <el-form-item label="标题" :label-width="formLabelWidth" prop="pee_title">
                <el-input
                    show-word-limit
                    v-model="Editform.pee_title"
                    maxlength="100"
                    :rows="2"
                    type="text">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="类别" :label-width="formLabelWidth" prop="pee_category">
                <el-select v-model="Editform.pee_category" placeholder="选择考研资讯类别...">
                  <el-option label="考研信息" value="1" name="考研信息"></el-option>
                  <el-option label="招生信息" value="2" name="招生信息"></el-option>
                  <el-option label="考研日报" value="3" name="考研日报"></el-option>
                  <el-option label="特别推荐" value="4" name="特别推荐"></el-option>
                  <el-option label="其他" value="5" name="其他"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="标签" :label-width="formLabelWidth" prop="pee_label">
            <el-input
                show-word-limit
                v-model="Editform.pee_label"
                maxlength="100"
                type="text">
            </el-input>
          </el-form-item>


          <el-form-item label="来源" :label-width="formLabelWidth" prop="pee_source">
            <el-input
                show-word-limit
                v-model="Editform.pee_source"
                maxlength="100"
                type="text">
            </el-input>
          </el-form-item>


          <el-form-item label="内容" :label-width="formLabelWidth" prop="pee_content">
            <el-input
                show-word-limit
                type="textarea"
                maxlength="5000"
                :rows="20"
                v-model="Editform.pee_content"></el-input>
          </el-form-item>

        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="editSave('Editform')">修 改</el-button>
          <el-button @click="openCancelEdit">取 消</el-button>
        </span>
      </el-dialog>

      <!--添加弹窗-->
      <el-dialog
          title="添加考研资讯"
          :visible.sync="addialogVisible"
          width="70%"
          @close="handleClose">

        <!--        编辑表单-->
        <el-form ref="Addform" :model="Addform" label-width="100px" :rules="rules" :before-close="closeDiv">


          <el-row>
            <el-col :span="12">
              <el-form-item label="标题" :label-width="formLabelWidth" prop="pee_title">
                <el-input
                    show-word-limit
                    v-model="Addform.pee_title"
                    maxlength="100"
                    :rows="2"
                    type="text">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="类别" :label-width="formLabelWidth" prop="pee_category">
                <el-select v-model="Addform.pee_category" placeholder="选择考研资讯类别...">
                  <el-option label="考研信息" value="1" name="考研信息"></el-option>
                  <el-option label="招生信息" value="2" name="招生信息"></el-option>
                  <el-option label="考研日报" value="3" name="考研日报"></el-option>
                  <el-option label="特别推荐" value="4" name="特别推荐"></el-option>
                  <el-option label="其他" value="5" name="其他"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="标签" :label-width="formLabelWidth" prop="pee_label">
            <el-input
                show-word-limit
                v-model="Addform.pee_label"
                maxlength="100"
                type="text">
            </el-input>
          </el-form-item>


          <el-form-item label="来源" :label-width="formLabelWidth" prop="pee_source">
            <el-input
                show-word-limit
                v-model="Addform.pee_source"
                maxlength="100"
                type="text">
            </el-input>
          </el-form-item>


          <el-form-item label="内容" :label-width="formLabelWidth" prop="pee_content">
            <el-input
                show-word-limit
                type="textarea"
                maxlength="5000"
                :rows="20"
                v-model="Addform.pee_content"></el-input>
          </el-form-item>

        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitAdd('Addform')">发 布</el-button>
          <el-button @click="cancel">取 消</el-button>
          <el-button @click="clearInput('Addform')">重 置</el-button>
        </span>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import {getAllPeeInfo,updatePeeInfo,deletePeeInfo,addPeeInfo} from "@/api/Pee";


export default {
  name: "information_main",
  data() {
    return {
      //筛选
      fiter_category:'',
      //搜索相关功能
      findTitle:'',
      peeContainerPage:0, // 分页的数据：当前页数
      peeContainerSize:0, // 分页的数据：每页的数量
      total:0,
      peeData: [],
      showData:[],
      copyData:[],
      search_info:[],  //存放搜索到的容器
      //批量删除
      multipleSelection: [],
      //  添加弹窗相关
      addialogVisible:false,
      Addform:{
        pee_title:'',
        pee_content:'',
        pee_category:'',
        pee_label:'',
        pee_source:'',

      },
    //  编辑功能相关
      editdialogVisible:false,
      Editform:{
        pee_id:'',
        pee_title:'',
        pee_content:'',
        pee_category:'',
        pee_label:'',
        pee_source:'',

      },
      formLabelWidth: '100px',
    //编辑表单验证规则
      rules: {
        pee_title: [
          { required: true, message: '请输入标题', trigger: 'blur'},
          { min:1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur'}
        ],
        pee_content: [
          { required: true, message: '请输入内容', trigger: 'blur'},
          { min:1, max: 5000, message: '长度在 1 到 5000 个字符', trigger: 'blur'}
        ],
        pee_category: [
          { required: true, message: '请选择类别', trigger: 'change'}
        ],
        pee_label: [
          { min:1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur'}
        ],
        pee_source: [
          { required: true, message: '请输入来源', trigger: 'blur'},
          { min:1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur'}
        ]
      },


    }
  },

  methods: {
    //获取全部考研资讯信息
    init(){
      getAllPeeInfo({
        // token: window.sessionStorage.getItem('token')
      }).then(res=>{
        this.peeData=res.data.data;
        this.copyData=res.data.data;
        this.total=res.data.total;
        this.getShowPee();
      });
    },
    getShowPee(){
      this.peeContainerSize=parseInt(10);
      this.showData = this.peeData.slice((this.peeContainerPage - 1) * this.peeContainerSize, this.peeContainerPage * this.peeContainerSize);
      this.total=parseInt(this.peeData.length);
    },
    //  数据筛选
    fiter_pee(){
      var search=this.fiter_category;
      //执行本地过滤
      var search_list=this.copyData;
      this.search_info=[];  //装搜索结果的容器
      for(let i=0;i<search_list.length;i++)
      {
        if(search_list[i].pee_category==search)
        {
          this.search_info.push(search_list[i]);
        }
      }
      if(this.search_info.length==0)
      {
        this.$msg.error('未找到相关结果,刷新一下~');
      }
      this.peeData=this.search_info;
      //分页
      this.peeContainerPage=parseInt(1);
      this.getShowPee();


    },
    //根据考研咨询标题搜索
    searchByTitle(){
      var search=this.findTitle;
      if(search==""||search==null)
      {
        this.$msg.error('输入框不能为空！');
        this.init();
      }
      else {
        //执行本地过滤
        var search_list=this.copyData;
        this.search_info=[];  //装搜索结果的容器
        for(let i=0;i<search_list.length;i++)
        {
          if(search_list[i].pee_title.indexOf(search)>=0)
          {
            this.search_info.push(search_list[i]);
          }
        }
        if(this.search_info.length==0)
        {
          this.$msg.error('未找到相关结果,刷新一下~');
        }
        this.peeData=this.search_info;
        //分页
        this.peeContainerPage=parseInt(1);
        this.getShowPee();

        //清空搜索框
        // this.findTitle="";
      }

    },
    //分页
    //page改变时的回调函数，参数为当前页码
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.peeContainerPage= parseInt(val);
      this.getShowPee();
    },
    //编辑考研资讯  打开编辑弹窗
    edit(index, row) {
      this.editdialogVisible=true;
      // console.log(index);
      console.log(row);
      this.Editform.pee_title=row.pee_title;
      this.Editform.pee_content=row.pee_content;
      this.Editform.pee_label=row.pee_label;
      this.Editform.pee_source=row.pee_source;
      this.Editform.pee_id=row.pee_id;


      if(row.pee_category==1){
        this.Editform.pee_category="考研信息";
      }else if(row.pee_category==2){
        this.Editform.pee_category="招生信息";
      }else if(row.pee_category==3){
        this.Editform.pee_category="考研日报";
      }else if(row.pee_category==4){
        this.Editform.pee_category="特别推荐";
      }
      else if(row.pee_category==5){
        this.Editform.pee_category="其他";
      }



    },
    //提交数据 修改
    editSave(formName)
    {
      //验证
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //再次确认
          this.$confirm('确认修改?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {


            if(this.Editform.pee_category=="考研信息"){
              this.Editform.pee_category=1;
            }else if(this.Editform.pee_category=="招生信息"){
              this.Editform.pee_category=2;
            }else if(this.Editform.pee_category=="考研日报"){
              this.Editform.pee_category=3;
            }else if(this.Editform.pee_category=="特别推荐"){
              this.Editform.pee_category=4;
            }else if(this.Editform.pee_category=="其他"){
              this.Editform.pee_category=5;
            }

            this.updateSave();
          }).catch(() => {
            this.$msg.error("修改失败！");
          });
        } else {
          this.$msg.error("修改失败！");
          return false;
        }
      });
    },
    //连接后端  进行修改
    updateSave(){
      updatePeeInfo({
        EditForm: this.Editform,
        pee_id:this.Editform.pee_id,
        // token: window.sessionStorage.getItem('token')
      }).then(res=>{
        if(res.data.code===1)
        {
          this.$msg.success("修改成功！");
          //刷新表格数据
          this.init();
          //关闭弹窗
          this.editdialogVisible=false;
        }
        else
        {
          this.$msg.error("修改失败！");
        }


        if(this.Editform.pee_category==1){
          this.Editform.pee_category="考研信息";
        }else if(this.Editform.pee_category==2){
          this.Editform.pee_category="招生信息";
        }else if(this.Editform.pee_category==3){
          this.Editform.pee_category="考研日报";
        }else if(this.Editform.pee_category==4){
          this.Editform.pee_category="特别推荐";
        }else if(this.Editform.pee_category==5){
          this.Editform.pee_category="其他";
        }



      });
    },
    //删除
    handleDelete(index, row) {
      //再次确认
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteSave(row.pee_id);
      }).catch(() => {
        this.$msg.error("取消失败！");
      });
    },
    //连接后端，进行删除
    deleteSave(pee_id){
      deletePeeInfo({
        pee_id:pee_id,
        // token: window.sessionStorage.getItem('token')
      }).then(res=>{
        if(res.data.code==1){
          this.$msg.success("删除成功！");
        }else{
          this.$msg.error("删除失败！");
        }
        this.init();
      });

    },
    //打开添加的弹窗
    addOpen(){
      this.addialogVisible=true;
    },
     submitAdd(formName){
      //验证
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //再次确认
          this.$confirm('确认发布?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.addSave();
          }).catch(() => {
            this.$msg.error("发布失败！");
          });
        } else {
          this.$msg.error("发布失败！");
          return false;
        }
      });
    },
    //连接后端 添加考研资讯
    addSave(){
      addPeeInfo({
        AddForm: this.Addform,
        // token: window.sessionStorage.getItem('token')
      }).then(res=>{
        if(res.data.code===1)
        {
          this.$msg.success("发布成功！");
          //刷新表格数据
          this.init();
          //关闭弹窗
          this.addialogVisible=false;
        }
        else
        {
          this.$msg.error("发布失败！");
        }
      });
    },
    //重置按钮
    clearInput(formName){
      this.$refs[formName].resetFields();
    },
    //  关闭弹窗
    cancel() {
      this.addialogVisible = false
      // 点击取消按钮的时候清除输入框中的内容 清除验证
      //  this.$nextTick获取了节点之后进行操作
      this.$nextTick(() => {
        // form对应你写的<el-form ref="form"></el-form>
        this.$refs["Addform"].resetFields();
      });

    },
    openCancelEdit(){
      this.editdialogVisible = false
    },
    // 右上角 × 取消按钮
    closeDiv() {

      this.$nextTick(() => {
        // form对应你写的<el-form ref="form"></el-form>
        this.$refs["Addform"].resetFields();
      });

    },
    //清空搜索框
    clearFindInput(){
      this.findTitle="";
      this.fiter_category="";
      this.init();
    },
    handleClose(){
      this.$nextTick(() => {
        // form对应你写的<el-form ref="form"></el-form>
        this.$refs["Addform"].resetFields();
      });
    },
    //取消选择
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);

        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
      //console.log(this.multipleSelection[0].admin_id);
    },
  //  批量删除
    handleMultipleDelete(rows){
      if (this.multipleSelection == '') {
        this.$message.error('您未选中考研资讯，请重新操作！！！');
        return;
      }

      let checkArr = this.multipleSelection;  // multipleSelection存储了勾选到的数据
      let pee_ids = [];
      checkArr.forEach(function (item) {
        pee_ids.push(item.pee_id);

      });

      //再次确认
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {


        deletePeeInfo({
          pee_id:pee_ids,
          // token: window.sessionStorage.getItem('token')
        }).then(res=>{
          if(res.data.code==1){
            this.$msg.success("批量删除成功！");
          }else{
            this.$msg.error("删除失败！");
          }
          this.init();
        });

      }).catch(() => {
        this.$msg.error("取消删除！");
      });


    },


  },
  created() {
    let _this=this;
    _this.peeContainerPage=parseInt(1);
    _this.init();
    _this.$refs.table.doLayout();
  },
}
</script>

<style scoped>
.btnfontClass{
  font-size: 15px;
}
.el-pagination {
  text-align: center;
}
.typeClass{
  font-size: 14px;
}

</style>
